<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-25
    	描述：组件-选择商品
    -->
  <el-dialog title="选择商品" :modal-append-to-body="true"  :append-to-body="true" v-model="dialogVisible" :close-on-click-modal="false"
    :close-on-press-escape="false" width="900px">
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="productArr" border style="width: 100%" highlight-current-row v-loading="loading"
          @selection-change="tableCurrentChange" ref="tableRef">
          <el-table-column width="70" label="商品图片">
            <template #default="scope">
               <img v-img-url="scope.row.imagePath" :width="30" :height="30" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="categoryName" width="100" label="商品分类"></el-table-column>
          <el-table-column prop="createTime" width="140" label="添加时间"></el-table-column>
          <el-table-column type="selection" :selectable="selectableFunc" width="44" v-if="islist"></el-table-column>
          <el-table-column width="80" label="单选" v-if="!islist">
            <template #default="scope">
              <el-button size="small" v-if="scope.row.noChoose" @click="SingleFunc(scope.row)">选择</el-button>
              <el-button size="small" v-else disabled>已选</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          :current-page="curPage" :page-sizes="[2, 10, 20, 50, 100]" :page-size="pageSize"
          layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="closeCheck">取 消</el-button>
        <el-button size="small" type="primary" @click="addClerk" v-if="islist">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        /*是否加载完成*/
        loading: true,
        /*当前是第几页*/
        curPage: 1,
        /*一页多少条*/
        pageSize: 20,
        /*一共多少条数据*/
        totalDataNumber: 0,
        formInline: {},
        //商品分类列表
        categoryList: [],
        //类别列表
        status: [
          {
            id: 10,
            name: '上架'
          },
          {
            id: 20,
            name: '下架'
          }
        ],
        multipleSelection: [],
        /*左边长度*/
        formLabelWidth: '120px',
        /*是否显示*/
        dialogVisible: false,
        /*结果类别*/
        type: 'error',
        /*传出去的参数*/
        params: null,
        checkIds: null,
        productArr: [],
        beforeDeliveryNumIds: [],
      };
    },
    props: ['is_product', 'excludeIds', 'islist','productList'],
    created () {
    },
    methods: {
      open(beforeDeliveryNumIds){
        // console.log("之前选中的ids",beforeDeliveryNumIds)
        this.beforeDeliveryNumIds = beforeDeliveryNumIds;
        this.type = 'error';
        this.dialogVisible = true;
        this.loading = false;
        if(this.$refs.tableRef){
          this.$refs.tableRef.clearSelection();
        }
        this.$nextTick(()=>{
          this.getData();
        })
      },
      /*是否可以勾选*/
      selectableFunc (e) {
        if (typeof e.noChoose !== 'boolean') {
          return true;
        }
        return e.noChoose;
      },
      closeCheck(){
        this.dialogVisible = false;
      },

      // /*选择第几页*/
      // handleCurrentChange (val) {
      //   this.curPage = val;
      //   this.getData();
      // },

      // /*每页多少条*/
      // handleSizeChange (val) {
      //   this.curPage = 1;
      //   this.pageSize = val;
      //   this.getData();
      // },

      /*获取商品列表*/
      getData () {
        let self = this;
        let excludeIds = this.$props.excludeIds;
        let productArr = JSON.parse(JSON.stringify(this.$props.productList));
        /*判断是否需要去重*/
        if (self.islist) {
            productArr.forEach(item => {
              if(excludeIds && excludeIds.length > 0){
                if (excludeIds.indexOf(item.productId) > -1) {
                  item.noChoose = false;
                } else {
                  item.noChoose = true;
                }
              }
              if(item.totalNum == item.deliveryNum || item.deliveryNum > item.totalNum){
                  item.noChoose = false;
              }
              if(self.beforeDeliveryNumIds && self.beforeDeliveryNumIds.length > 0){
                self.beforeDeliveryNumIds.forEach((product)=>{
                  if(product.productId == item.productId){
                    let deliveryNum = Number(product.deliveryNum);
                    item.deliveryNum = deliveryNum;
                  }
                })
              }
            });
        } else {
          if (!self.islist) {
            productArr.forEach(item => {
              item.noChoose = true;
            });
          }
        }
        // console.log("productArr",productArr)
        this.productArr = productArr;
      },

      /*单选*/
      SingleFunc (row) {
        this.multipleSelection = [row];
        this.addClerk();
      },

      //点击确定
      addClerk () {
        let self = this;
        let params = null;
        let type = 'success';
        if (self.multipleSelection.length < 1) {
          ElMessage ({
            message: '请至少选择一件产品商品！',
            type: 'error'
          });
          return;
        }
        let checkList = [];
        let checkIds = [];
        self.multipleSelection.forEach(item => {
          let obj = {
            orderProductId:item.orderProductId,
            /* 
            @ApiModelProperty("购买数量")
            private Integer totalNum;

            @ApiModelProperty("已发货总数量")
            private Integer deliveryNum;
              */
            // 最大发货数量
            maxDeliveryNum: Number(item.totalNum) - Number(item.deliveryNum || 0),
            totalNum: item.totalNum,
            // 实际填写的发货数量
            deliveryNum: Number(item.totalNum) - Number(item.deliveryNum || 0),
            imagePath: item.imagePath,
            productName: item.productName,
            productId: item.productId,
          }
          checkList.push(obj)
          checkIds.push(item.productId)
        });
        params = checkList;
        self.params = params;
        self.checkIds = checkIds;
        self.type = 'success';
        this.$emit('closeDialog',{
          params: this.params,
          checkIds: this.checkIds,
        })
        self.dialogVisible = false;
      },

      /*监听复选按钮选中事件*/
      tableCurrentChange (val) {
        let excludeIds = this.$props.excludeIds;
        let list = [];
        if(val && val.length > 0){
          val.forEach((items)=>{
            if(!excludeIds.includes(items.productId)){
              list.push(items)
            }
          })
        }
        this.multipleSelection = list;
      }
    }
  };
</script>

<style>
  .no-list .el-checkbox {
    display: none;
  }
</style>